---
menu: 表单项
name: DatetimeRange 日期时间范围
route: /component/formFields/datetimeRange
order: 2
---

import { useState } from 'react'
import { Playground, Props } from 'docz';
import DatetimeRange, { PropsType } from './index';
import Form from '../../../steps/form';

# DatetimeRange 日期选择范围-表单项

表单项内的日期选择范围选项。

## 何时使用
表单内需要设置日期选择范围选项时。<br/>
提供了以下可配置项：
- 展示格式设置: `YYYY-MM-DD HH:mm:ss`
- 表单提交数据支持`string`,分隔，`array`,和二个字段提交
- 区间分隔符号定义
- 默认值：支持五种获取方式，默认值支持字符串与数组与表单项


## 如何使用
### 配置化JSON参考
`config`中`fields`为表单项配置信息
```
  fields:[
    {
      label: '开始时间',
      field: 'datetimeRange',
      type: 'datetimeRange',
      default: {
        type: "static",
        value: "2020-01-01,2021-02-01"
      }
    }
  ]
```

## 代码演示

### 组件单独调用
<Playground>
  {() => {
    const [ value, setValue ] = useState()

    return (
      <DatetimeRange
        onChange={(value) => setValue(value)}
      />
    )
  }}
</Playground>

### 在表单中使用

<Playground>
  <Form layout="horizontal" 
    config={{
      fields: [
        {
          label: '日期时间范围',
          field: 'type',
          type: 'datetimeRange',
          type: 'datetimeRange'
        }
      ]
    }}
    onSubmit={()=>{}}
    onUnmount={()=>{}}
    onMount={()=>{}}
    ref={(form) => {
      form.willMount()
    }}
  />
</Playground>

### 默认值 - 逗号分隔字符串，定义分隔符

<Playground>
  <Form
    config={{
      fields: [
        {
          label: '日期时间范围',
          field: 'datetimeRange',
          type: 'datetimeRange',
          split: "~",
          default: {
            type: "static",
            value: "2020-01-01,2021"
          }
        }
      ]
    }}
    onSubmit={()=>{}}
    onUnmount={()=>{}}
    onMount={()=>{}}
    ref={(form) => {
      form.willMount()
    }}
  />
</Playground>

###  默认值 - 数组

<Playground>
  <Form
    config={{
      fields: [
        {
          label: '日期时间范围',
          field: 'datetimeRange',
          type: 'datetimeRange',
          default: {
            type: "static",
            value: ["2020-01-01","2021-01-02"]
          }
        }
      ]
    }}
    onSubmit={()=>{}}
    onUnmount={()=>{}}
    onMount={()=>{}}
    ref={(form) => {
      form.willMount()
    }}
  />
</Playground>

### 字符接口获取

<Playground>
  <Form
    config={{
      fields: [
        {
          label: '日期时间范围',
          field: 'datetimeRange',
          type: 'datetimeRange',
          default: {
            type: 'interface',
            api: {
              url: 'http://j-api.jd.com/mocker/data?p=263&v=POST&u=list.do',
              method: 'GET',
              contentType: 'json',
              withCredentials: true
            },
            apiResponse: 'result.0.datetime'
          }
        }
      ]
    }}
    onSubmit={()=>{}}
    onUnmount={()=>{}}
    onMount={()=>{}}
    ref={(form) => {
      form.willMount()
    }}
  />
</Playground>

###  定义提交格式 年

<Playground>
  <Form
    config={{
      fields: [
        {
          label: '日期时间范围',
          field: 'datetimeRange',
          type: 'datetimeRange',
          submitFormat: 'YYYY',
          default: {
            type: "static",
            value: ["2020-01-01","2021-01-02"]
          }
        }
      ]
    }}
    onSubmit={()=>{}}
    onUnmount={()=>{}}
    onMount={()=>{}}
    ref={(form) => {
      form.willMount()
    }}
  />
</Playground>


###  定义提交格式 - 字符串

<Playground>
  <Form
    config={{
      fields: [
        {
          label: '日期时间范围',
          field: 'datetimeRange',
          type: 'datetimeRange',
          submitFormatMode: 'comma',
          default: {
            type: "static",
            value: ["2020-01-01","2021-01-02"]
          }
        }
      ]
    }}
    onSubmit={()=>{}}
    onUnmount={()=>{}}
    onMount={()=>{}}
    ref={(form) => {
      form.willMount()
    }}
  />
</Playground>

## APIs
 <Props of={PropsType} />